<template>
  <van-nav-bar
      :title="getTitleName()"
      class="title-text nav-bar"
      :border=false
  />
  <span class="span1" :v-if="userinfo.cardStatus==2">{{$t('msg.mineStr1')}}：<span class="span2">{{ formatDate() }}</span></span>
  <div class="image-margin">
    <van-image
        fit="cover"
        radius="6px"
        height="168px"
        width="100%"
        :src="imageUrl"
        @click="toVipDetail">
      <template v-slot:loading>
        <van-loading type="spinner" size="20"/>
      </template>
    </van-image>
  </div>
</template>

<script>
import {getUserInfo, getVipImage} from "@/http/api";
import {isNeedOpenCard, utils} from "@/utils/utils";
import {storage, USER_INFO} from "@/utils/storage";
import {showToast} from "vant";
import {ref} from "vue";

export default {
  name: 'Mine',
  setup(){
    const show = ref(false);
    return {
      show
    }
  },
  data() {
    return {
      userinfo: {},
      imageUrl: ""
    }
  },
  mounted() {
    this.getUserInfo()
    this.getVipImage()
  },
  methods: {
    async getUserInfo() {
      try {
        let data = await getUserInfo()
        this.userinfo = data
        storage.set(USER_INFO, JSON.stringify(data))
      } catch (e) {

      }
    },
    async getVipImage() {
      try {
        let dataList = await getVipImage()
        let data = dataList.content[0]
        this.imageUrl = data.cardCover
        this.imageName = data.cardName
      } catch (e) {
      }
    },
    getTitleName() {
      //userCardStatus 0： 未提交开卡信息1:   提交开卡信息未审核完成2: 开卡成功-1: 审核失败-2 ：停用
      switch (this.userinfo.userCardStatus) {
        case 0:
          return this.$t('msg.mineTitle1')
        case 1:
          return this.$t('msg.mineTitle2')
        case 2:
          return this.userinfo.userName
        default:
          return this.$t('msg.mineTitle3')
      }
    },
    formatDate() {
      return utils.dateFormat(this.userinfo.endTime, "yyyy.MM.DD")
    },
    toVipDetail() {
      if (isNeedOpenCard()) {
        this.$router.push(`/vip-detail/${this.vipData._id}`)
      }
    }
  }
}
</script>

<style scoped>
.image-margin {
  padding: 16px;
}

.span1 {
  font-size: 13px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 14px;
  margin-top: 12px;
}

.span2 {
  color: #AB9263;
}
</style>
